<template>
  <el-dialog
    :title="!dataForm.id ? '新增罚款记录' : '修改罚款记录'"
    :close-on-click-modal="false"
    v-model="visible"
    width="692px"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      :rules="dataRule"
      label-width="60px"
    >
      <el-form-item label="类型" prop="typeId">
        <el-select
          v-model="dataForm.typeId"
          placeholder="罚款类型"
          size="medium"
          style="width: 40%"
        >
          <el-option
            v-for="one in amectTypeList"
            :label="one.type"
            :value="one.id"
          />
        </el-select>
        <span class="desc">必须选择一个罚款类型，罚款金额可以自动生成</span>
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <el-input
          v-model="dataForm.amount"
          size="medium"
          style="width: 40%"
          placeholder="罚款金额"
          clearable
        />
        <span class="desc">元</span>
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="罚款原因"
          v-model="dataForm.reason"
          size="medium"
          resize="none"
          maxlength="200"
          show-word-limit
          clearable="clearable"
        />
      </el-form-item>
      <el-form-item label="成员" prop="members" v-if="dataForm.id == 0">
        <el-transfer
          v-model="dataForm.members"
          :data="users"
          :titles="['员工', '当事人']"
          filterable
          filter-placeholder="请输入姓名"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="medium" @click="visible = false">取消</el-button>
        <el-button type="primary" size="medium" @click="dataFormSubmit"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data: function () {
    return {
      visible: false,
      dataForm: {
        id: null,
        typeId: null,
        amount: null,
        reason: null,
        members: [],
      },
      amectTypeList: [],
      users: [],
      dataRule: {
        typeId: [{ required: true, message: "罚款类型为必填" }],
        amount: [
          {
            required: true,
            pattern:
              "(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)",
            message: "罚款金额格式错误",
          },
        ],
        reason: [{ required: true, message: "罚款原因为必填" }],
        members: [
          { required: true, trigger: "blur", message: "必须设置当事人" },
          { required: false, trigger: "change", message: "必须设置当事人" },
        ],
      },
    };
  },
  methods: {
    init: function (id) {
      let that = this;
      that.dataForm.id = id || 0;
      that.visible = true;
      that.$nextTick(() => {
        that.$refs["dataForm"].resetFields();
        that.$http(
          "amect_type/searchAllAmectType",
          "GET",
          {},
          true,
          function (resp) {
            that.amectTypeList = resp.list;
          }
        );
        that.$http("user/searchAllUser", "GET", null, true, function (resp) {
          let temp = [];
          for (let one of resp.list) {
            temp.push({ key: one.id, label: one.name });
          }
          that.users = temp;
        });
        if (id) {
          that.$http(
            "amect/searchById",
            "POST",
            { id: id },
            true,
            function (resp) {
              that.dataForm.typeId = resp.typeId;
              that.dataForm.amount = resp.amount + "";
              that.dataForm.reason = resp.reason;
            }
          );
        }
      });
    },
    dataFormSubmit: function () {
      let that = this;
      let data = {
        userId: that.dataForm.members,
        amount: that.dataForm.amount,
        typeId: that.dataForm.typeId,
        reason: that.dataForm.reason,
      };
      if (that.dataForm.id) {
        data.id = that.dataForm.id;
      }
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          that.$http(
            `amect/${!that.dataForm.id ? "insert" : "update"}`,
            "POST",
            data,
            true,
            function (resp) {
              if (resp.rows > 0) {
                that.visible = false;
                that.$emit("refreshDataList");
                that.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1200,
                });
              } else {
                that.$message({
                  message: "操作失败",
                  type: "error",
                  duration: 1200,
                });
              }
            }
          );
        }
      });
    },
  },
};
</script>

<style>
.desc {
  margin-left: 15px;
}
</style>
